<template>
  <view class="p-pop-x">
    <view class="_content" @click="handleConfirm">
      <view class="_header">
        <view class="_img">
          <x-image src="/assets/images/app-logo.png" appid />
        </view>
        {{ config.appName }}的红包
      </view>
      <view class="_t1">
        恭喜您获得{{ config.appName }}专享券
      </view>
      <view class="_t2">
        <text class="_rmb">¥</text>
        <text>{{ detail.totalDiscountAmount }}</text>
      </view>

      <view class="_pic" @click="handleConfirm">
        <x-image src="/assets/images/x-pay-cancel-open-red.gif" mode="aspectFill" />
      </view>
      <view class="_text">
        限今日领取
      </view>
    </view>

    <view class="_bottom" @click="handleCancel">
      <x-image src="/assets/images/x-pay-cancel-close-red.png" />
    </view>
  </view>
</template>

<script>
import config from '@/config';
import XImage from '@/components/x-image';

export default {
  name: 'PPop3',
  components: {
    XImage
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      config
    };
  },
  methods: {
    handleCancel() {
      this.$emit('close');
      this.$XTrack('onDiscountPayCancelClick');
    },
    handleConfirm() {
      this.$emit('submit');
      // 振动
      wx.vibrateLong();
      this.$XTrack('onDiscountPayClick');
    }
  }
};
</script>

<style lang="scss" scoped>
  .p-pop-x{
    background-color: #7F7F7F; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    ._content{
      width: 600px;height: 980px; background: cdn('/images/x-pay-cancel-red-paper.png') no-repeat; background-size: cover; position: relative; text-align: center; color: #F7EDC2; margin-bottom: 20px;
      ._header{
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 36px;
        padding-top: 162px;
        ._img{
          width: 64px;
          height: 64px;
          overflow: hidden;
          margin-right: 18px;
        }
      }
      ._t1{
        margin-top: 90px;
        font-size: 44px;
      }
      ._t2{
        ._rmb{
          font-size: 36px;
          margin-right: 8px;
        }
        margin-top: 60px;
        font-size: 76px;
      }
    }
    ._pic{
      width: 190px; height: 190px; overflow: hidden; position: absolute; left: 50%; bottom: 144px; transform: translate3d(-50%, 0, 0);
    }
    ._text{
      position: absolute; left: 50%; bottom: 38px; transform: translate3d(-50%, 0, 0);text-align: center;
      font-size: 36px;
      line-height: 42px;
      color: #F7EDC2;
    }
    ._bottom{
      width: 60px;
      height: 60px;
    }
  }
</style>
